<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">幸运大抽奖</block>
		</cu-custom>
		
		<view v-if="isInit" :style="'background:url('+background+');height:'+screenHeight+'px;background-size:cover;padding-top:300rpx;'">
			
			<LuckyGrid
				width="600rpx"
				height="600rpx"
				:blocks="blocks"
				:prizes="prizes"
				:buttons="buttons"
				:defaultStyle="defaultStyle"
				ref="myLucky"
				@start="startCallBack"
				@end="endCallBack"
			/>
			
		</view>
		<view class="cu-load load-modal" v-if="!isInit">
			<view class="gray-text">加载中...</view>
		</view>
		
	</view>
	
</template>

<script>
	import LuckyGrid from '@/components/@lucky-canvas/uni/lucky-grid.vue' // 九宫格
	import * as confirm from '@/common/confirm.js'	  
	
	export default {
		components: { LuckyGrid },
		data() {
			return {
				isInit:false,
				blocks: [{ padding: '10px', background: '#869cfa' },{ padding: '10px', background: '#e9e8fe' },],
				prizes: [
					{ x: 0, y: 0 ,fonts: [{ text: '1000积分', top: '70%' }]},
					{ x: 1, y: 0 ,fonts: [{ text: '500积分', top: '70%' }]},
					{ x: 2, y: 0 ,fonts: [{ text: '300积分', top: '70%' }]},
					{ x: 2, y: 1 ,fonts: [{ text: '100积分', top: '70%' }]},
					{ x: 2, y: 2 ,fonts: [{ text: '30积分', top: '70%' }]},
					{ x: 1, y: 2 ,fonts: [{ text: '20积分', top: '70%' }]},
					{ x: 0, y: 2 ,fonts: [{ text: '10积分', top: '70%' }]},
					{ x: 0, y: 1 ,fonts: [{ text: '谢谢', top: '70%' }]},
				],
				buttons: [
				  {x: 1, y: 1,background: '#9c9dd8',fonts: [{ text: '开始', top: '40%' }],},
				],
				defaultStyle: {
				  background: '#b8c5f2',
				  fontSize:"16px",
				  fontColor: '#ff6b61'
				},
				screenHeight:this.s_h_nob,
				background:''
			}
		},
		onLoad(){
			this.$api.post('/user/get_lottery_grid').then((res)=>{
				this.prizes=res.data.grid
				this.buttons=[res.data.button]
				this.background=res.data.background
				setTimeout(()=>{
					this.isInit=true
				},1000)				
			})
		},
		methods: {
			// 点击抽奖按钮触发回调
			startCallBack () {
				// 先开始旋转				
				this.$api.post('/user/play_lottery').then(res => {
					this.$refs.myLucky.play()
					// 使用定时器来模拟请求接口
					setTimeout(() => {
					  // 假设后端返回的中奖索引是0
					  const index = res.data
					  // 调用stop停止旋转并传递中奖索引
					  this.$refs.myLucky.stop(index)
					}, 2000)				
				}).catch((res)=>{
					confirm.info(res.msg)
				})
			},
			// 抽奖结束触发回调
			endCallBack (prize) {
				setTimeout(()=>{
					if(prize.x==0&&prize.y==1){
						confirm.info("很遗憾,明天再来抽奖吧!!!",()=>{
							uni.navigateBack()
						})					
					}else{
						confirm.info("恭喜您获得"+prize.fonts[0].text+"!!!",()=>{
							uni.navigateBack()
						})					
					}
				},1000)
			}
		}
	}
</script>

<style>

</style>
